<template>
  <div>
    <div class="top">
      <el-form :inline="true" :model="form">
        <el-form-item label="车型编号">
          <el-input
            style="width: 300px"
            v-model="form.id"
            placeholder="请选择车型编号"
          />
        </el-form-item>
        <el-form-item label="应载重量">
          <el-select placeholder="请选择应载重量" v-model="form.allowableLoad">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应载体积">
          <el-select
            placeholder="请选择应载体积"
            v-model="form.allowableVolume"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车辆类型">
          <el-input
            style="width: 300px"
            v-model="form.name"
            placeholder="请选择车辆类型"
          />
        </el-form-item>
        <el-button type="warning" @click="serch">搜索</el-button>
        <el-button type="danger" @click="chongzhi">重置</el-button>
      </el-form>
    </div>
    <div class="btm">
      <el-button type="warning" @click="add">增加车型</el-button>
      <el-table :data="Data" style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="id" label="车型编号"> </el-table-column>
        <el-table-column prop="name" label="车辆类型"> </el-table-column>
        <el-table-column prop="num" label="车型数量"> </el-table-column>
        <el-table-column prop="allowableLoad" label="应载重量（吨）">
        </el-table-column>
        <el-table-column
          prop="allowableVolume"
          label="应载体积（立方米）"
          width="200"
        >
        </el-table-column>
        <el-table-column prop="measureLong" label="长（米）"> </el-table-column>
        <el-table-column prop="measureWidth" label="宽（米）">
        </el-table-column>
        <el-table-column prop="measureHigh" label="高（米）"> </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-link type="primary" @click="bianji(row.id)">编辑 | </el-link>
            <el-link type="danger" @click="del(row.id)"> 删除 </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page1.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="page1.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="40%" @close="close">
      <el-form
        label-width="80px"
        :model="formData"
        :rules="rules"
        ref="formref"
      >
        <el-form-item label="车辆类型" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="应载重量" prop="allowableLoad">
          <el-input v-model="formData.allowableLoad"></el-input>
        </el-form-item>
        <el-form-item label="应载体积" prop="allowableVolume">
          <el-input v-model="formData.allowableVolume"></el-input>
        </el-form-item>
        <el-form-item label="长">
          <el-input v-model="formData.measureLong"></el-input>
        </el-form-item>
        <el-form-item label="宽">
          <el-input v-model="formData.measureWidth"></el-input>
        </el-form-item>
        <el-form-item label="高">
          <el-input v-model="formData.measureHigh"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getTruckApi,
  postTruckApi,
  getOneTruckApi,
  putTruckApi,
  delTruckApi 
} from "@/api/truck";
export default {
  name: "car-models",
  data() {
    return {
      page1: {
        page: 1,
        pageSize: 10,
      },
      Data: [],
      dialogVisible: false,
      fo: "",
      total: 0,
      form: {
        id: "",
        name: "",
        allowableLoad: "",
        allowableVolume: "",
      },
      title: "",
      formData: {},
      options: [
        {
          label: "<3(m³)",
          value: "RANGE_LEVEL_1",
        },
        {
          label: "3-5(m3)",
          value: "RANGE_LEVEL_2",
        },
        {
          label: "5-10(m3)",
          value: "RANGE_LEVEL_3",
        },
        {
          label: "10-15(m3)",
          value: "RANGE_LEVEL_4",
        },
        {
          label: "15-30(m3)",
          value: "RANGE_LEVEL_5",
        },
        {
          label: "30-50(m3)",
          value: "RANGE_LEVEL_6",
        },
        {
          label: "50-80(m3)",
          value: "RANGE_LEVEL_7",
        },
        {
          label: "80-150(m3)",
          value: "RANGE_LEVEL_8",
        },
        {
          label: "150>(m3)",
          value: "RANGE_LEVEL_9",
        },
      ],
      options1: [
        {
          label: "<1.8(吨）",
          value: "RANGE_LEVEL_1",
        },
        {
          label: "1.8-6(吨）",
          value: "RANGE_LEVEL_2",
        },
        {
          label: "6-14(吨）",
          value: "RANGE_LEVEL_3",
        },
        {
          label: "14-30(吨）",
          value: "RANGE_LEVEL_4",
        },
        {
          label: "30-50(吨）",
          value: "RANGE_LEVEL_5",
        },
        {
          label: "50-100(吨）",
          value: "RANGE_LEVEL_6",
        },
      ],
      rules: {
        name: [
          {
            required: true,
            message: "请输入车辆类型",
          },
        ],
        allowableLoad: [
          {
            required: true,
            message: "请输入载重",
          },
        ],
        allowableVolume: [
          {
            required: true,
            message: "请输入体积",
          },
        ],
      },
    };
  },
  created() {
    this.Carmodels();
  },
  methods: {
    async add() {
      this.dialogVisible = true;
      this.title = "添加表单";
    },
    async submit() {
      if (this.formData.id) {
        const res1 = await putTruckApi(this.formData);
        console.log(res1);
        this.$message.success("修改成功");
      } else {
        const res = await postTruckApi(this.formData);
        console.log(res);
        this.$message.success("新增成功");
      }
      this.dialogVisible = false;
      this.Carmodels();
    },
    async serch() {
      const res = await getTruckApi({ ...this.page1, ...this.form });
      console.log(res);
      this.Data = res.data.items;
    },
    async Carmodels() {
      const res = await getTruckApi(this.page1);
      console.log(res);
      this.Data = res.data.items;
      this.total = +res.data.counts;
    },
    handleSizeChange(val) {
      this.page1.pageSize = val;
      this.Carmodels();
    },
    handleCurrentChange(val) {
      this.page1.page = val;
      this.Carmodels();
    },
    chongzhi() {
      this.form = {
        id: "",
        name: "",
        allowableLoad: "",
        allowableVolume: "",
      };
      this.Carmodels();
    },
    async del(id) {
      await this.$confirm("确认删除吗");
      await delTruckApi(id);
      this.$message.success("删除成功");
      this.Carmodels();
    },
    async bianji(id) {
      this.dialogVisible = true;
      const res = await getOneTruckApi(id);
      console.log(res);
      this.formData = res.data;
    },
    close() {
      this.$refs.formref.resetFields();
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  padding: 20px;
  width: 1250px;
  height: 140px;
  background-color: #fff;
}
.btm {
  padding: 20px;
  width: 1250px;
  min-height: 360px;
  background-color: #fff;
  margin-top: 40px;
}
</style>